<#include "/layout/header.ftl" />
<#import "/include/ui.ftl" as blue />

<link rel="stylesheet" href="${rc_path}/css/datetimepicker.css"/>
<script src="${rc_path}/js/jquery/jquery-plupload.js"></script>
<script src="${rc_path}/js/amazeui/datetimepicker.js"></script>
<script>

$(function()
{
	pos_change();
	
	$.upload(
	{
		button: "#btn_pic",
		type: 1,
		progress: "#prog_pic",
		url: "/cms/doc_file_upload",
		param: {webId: "${(model.webId)!}", pos: "1"},
		result: function(up, file, o)
		{
			var data = o;
			$("#hdn_pic").val(data.key);
			$("#a_pic").attr("href", data.url);
			$("#img_pic").attr("src", data.url).show();
		}
	});
	
	$("#txt_start_time").datetimepicker({ language:  "zh-CN", autoclose: true, format: "yyyy-mm-dd hh:ii"});
	$("#txt_end_time").datetimepicker({ language:  "zh-CN", autoclose: true, format: "yyyy-mm-dd hh:ii"});
	
});

function pos_change()
{
	var type = $("#slt_pos option:selected").attr("type");
	if (type == "1") // 图片
	{
		$("#div_pic").show();
		$("#div_text").hide();
		
		$("#hdn_pic").attr("name", "content");
		$("#div_text textarea").removeAttr("name");
	}
	else if (type == "2") // 文字
	{
		$("#div_pic").hide();
		$("#div_text").show();
		
		$("#hdn_pic").removeAttr("name");
		$("#div_text textarea").attr("name","content");
	}
}

function save_click()
{
	$.simpleValid("#div_form", function(obj)
	{
		if (obj.startTime)
			obj.startTime += ":00";
		if (obj.endTime)
			obj.endTime += ":00";
			
		$.simpleAjax("/cms/adv_save", obj, function(o)
		{
			$.successAlert("保存成功", "save_success()", 2000);
		});
	});
}
function save_success()
{
	window.location = "${path}/cms/adv_list?webId=${model.webId!}";
}
</script>

<div class="am-form am-form-horizontal am-cf am-margin" id="div_form">
<input type="hidden" name="id" value="${model.id!}"/>
<input type="hidden" name="webId" value="${(model.webId)!}"/>

	<fieldset>
		<legend><#if model.id??>修改<#else>添加</#if>广告</legend>

		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">网站</label>
				<div class="am-u-md-9 am-u-end">
					<input type="text" class="am-form-field am-radius" value="${(web.name)!}" readonly/>
				</div>
			</div>
		</div>

		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">位置</label>
				<div class="am-u-md-9 am-u-end">
					<select class="am-form-field am-radius" id="slt_pos" name="posId" data-am-selected="{'btnWidth': '200px'}" required onchange="pos_change()">
						<#list posList as vo>
						<option type="${vo.type.index!}" value="${vo.id}" <#if model.posId?? && vo.id==model.posId>selected</#if>>${vo.name}</option>
						</#list>
					</select>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">名称</label>
				<div class="am-u-md-9 am-u-end">
					<input type="text" name="name" placeholder="输入广告名称" class="am-form-field am-radius"  maxlength="50" value="${model.name!}" required/>
				</div>
			</div>
		</div>

		<div class="am-u-md-12" id="div_pic">
			<div class="am-form-group">
				<label class="am-u-md-1 am-form-label am-padding-left-0 am-padding-right-0">
					<input type="button" id="btn_pic" class="am-btn am-btn-primary am-radius" value="上传图片" />
					<input type="hidden" id="hdn_pic" name="content" value="${model.content!}" />
				</label>
				<div class="am-u-md-10 am-u-end">
					<div class="am-progress" id="prog_pic" style="display: none;">
						<div class="am-progress-bar am-radius" style="width: 0%">0%</div>
					</div>
					<a id="a_pic" href="${model.picUrl!}" target="_blank">
						<img src="${model.picUrl!}" id="img_pic" height="100" <#if !(model.picUrl??)>style="display: none;"</#if> />
					</a>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-12" id="div_text">
			<div class="am-form-group">
				<label class="am-u-md-1 am-form-label am-padding-left-0 am-padding-right-0">广告文字</label>
				<div class="am-u-md-10 am-u-end">
					<textarea name="content" placeholder="输入广告文字" class="am-form-field am-radius" style="height: 100px;"
						maxlength="500">${model.content!}</textarea>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-12">
			<div class="am-form-group">
				<label class="am-u-md-1 am-form-label am-padding-left-0 am-padding-right-0">链接</label>
				<div class="am-u-md-10 am-u-end">
					<input type="text" name="url" placeholder="输入广告链接" class="am-form-field am-radius"  maxlength="200" value="${model.url!}" required/>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">开始生效时间</label>
				<div class="am-u-md-7 am-padding-right-0">
					<input type="text" id="txt_start_time" name="startTime" placeholder="选择开始生效时间" class="am-form-field am-radius "
						value="${(model.startTime?string("yyyy-MM-dd HH:mm"))!}" readonly/>
				</div>
				<div class="am-u-md-2 am-padding-left-0 am-u-end">
					<input type="button" class="am-btn am-btn-primary" value="清除" onclick="$('#txt_start_time').val('');" />
				</div>
			</div>
		</div>
		
		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">结束生效时间</label>
				<div class="am-u-md-7 am-padding-right-0">
					<input type="text" id="txt_end_time" name="endTime" placeholder="选择结束生效时间" class="am-form-field am-radius "
						value="${(model.endTime?string("yyyy-MM-dd HH:mm"))!}" readonly/>
				</div>
				<div class="am-u-md-2 am-padding-left-0 am-u-end">
					<input type="button" class="am-btn am-btn-primary" value="清除" onclick="$('#txt_end_time').val('');" />
				</div>
			</div>
		</div>

		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">状态</label>
				<div class="am-u-md-9 am-u-end">
					<select class="am-form-field am-radius" name="state" data-am-selected="{'btnWidth': '120px'}" required>
						<@blue.select list=map.state value=(model.state.index)!"0" />
					</select>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-6">
			<div class="am-form-group">
				<label class="am-u-md-2 am-form-label am-padding-left-0 am-padding-right-0">排序</label>
				<div class="am-u-md-9 am-u-end">
					<input type="number" name="sort" placeholder="输入广告排序" class="am-form-field am-radius"  maxlength="10" value="${model.sort!"0"}" required/>
				</div>
			</div>
		</div>
		
		<div class="am-u-md-12">
			<div class="am-form-group">
				<label class="am-u-md-1 am-form-label am-padding-left-0 am-padding-right-0">描述</label>
				<div class="am-u-md-10 am-u-end">
					<textarea name="descp" placeholder="输入广告描述" class="am-form-field am-radius" style="height: 100px;"
						maxlength="500">${model.descp!}</textarea>
				</div>
			</div>
		</div>

		<div class="am-u-md-12 am-text-center div_btn">
			<a href="javascript:void(0)" onclick="save_click()" class="am-btn am-btn-primary am-radius">保存</a>
			<a href="javascript:void(0)" onclick="save_success()" class="am-btn am-btn-default am-radius am-margin-left">返回</a>
		</div>
	</fieldset>
</div>

<#include "/layout/footer.ftl" />